<template>
	<view class="box">
		<!-- 备注及输入金额 -->
		<view class="remark">
			<!-- 备注输入框 -->
			<view class="input">
				<input type="text" v-model="state.remark" placeholder="请输入备注">
			</view>
			<!-- 金额金额展示框 -->
			<view class="momey">
				￥{{state.momey}}
			</view>
		</view>
		<!-- 数字键盘 -->
		<view class="keyboard">
			<view class="keyItem" v-for="item in state.keyArr" :key="item" :class="state.btnId == item ?'btnBG':''"
				@click="changeMemoy(item)">
				{{item}}
			</view>
		</view>
		<!-- 时间选择 -->
		<u-datetime-picker @cancel="closeDateSelect" @confirm="selectDate" :minDate="Number(new Date(2000,0,1))" :maxDate="Number(new Date())" :show="state.dateShow" v-model="state.dateValue" mode="datetime"></u-datetime-picker>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive
	} from "vue";

	const state = reactive({
		remark: '',
		momey: '0.00',
		keyArr: ['7', '8', '9', '日期', '4', '5', '6', '+', '1', '2', '3', '-', '.', '0', '删除', '完成'],
		btnId: '',
		token: '',
		dateShow:false,
		dateValue:Number(new Date(new Date().getFullYear()-5,1,1)),
		timer:''
	})
	const prop = defineProps({
		data: {
			type: Array
		},
		info: {
			type: Object
		},
		changeType: {
			type: String
		}
	})
	// 生命周期
	onMounted(() => {
		getToken()
		// console.log(prop.changeType)
		if (prop.changeType === '修改' || prop.changeType === '扫描') {
			setInfo()
		}
	})
	// 当账单为修改类型时，设置账单数据
	const setInfo = () => {
		state.remark = prop.info.remark;
		state.momey = prop.info.money.toString();
	}
	// 获取存储token
	const getToken = () => {
		uni.getStorage({
			key: 'Authorization',
			success: (res) => {
				state.token = res.data
			}
		})
	}
	// 获取时间
	const selectDate = (e)=>{
		let date = new Date(e.value);
		let month = (parseInt(date.getMonth()) + 1).toString();
		let time = date.getFullYear() + '-' + month + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
		state.timer = time
		state.dateShow = false
	}
	// 关闭日期选择
	const closeDateSelect = () =>{
		state.dateShow = false
	}
	// 键盘点击事件
	const changeMemoy = (id) => {
		changeBg(id)
		if (id !== '日期' && id !== '+' && id !== '-' && id !== '删除' && id !== '完成') {
			if (state.momey == '0.00') {
				if (id != '.') {
					state.momey = id;
				}
			} else {
				if (id == '.') {
					if (!state.momey.split('').includes('.') && state.momey.length > 0) {
						state.momey = state.momey + '.';
					}
				} else if (id == '0') {
					if (state.momey !== '0') {
						state.momey = state.momey + '0';
					}
				} else {
					if (state.momey != '0') {
						state.momey = state.momey + id
					} else {
						state.momey = id
					}
				}
			}
		} else if (id == '删除') {
			if (state.momey.length > 1) {
				state.momey = state.momey.slice(0, state.momey.length - 1);
			} else if (state.momey.length == 1) {
				if (state.momey != '0') {
					state.momey = '0';
				}
			}
		} else if (id == '完成') {
			addcount()
		} else if (id == '日期') {
			state.dateShow = true
		}
	}
	// 点击改变按键颜色
	const changeBg = (id) => {
		state.btnId = id;
		setTimeout(() => {
			state.btnId = '';
		}, 200)
	}
	// 增加账单
	const addcount = () => {
		let date = new Date();
		let month = (parseInt(date.getMonth()) + 1).toString();
		let time = date.getFullYear() + '-' + month + '-' + date.getDate() + ' ' + date.getHours() + ':' + date
			.getMinutes() + ':' + date.getSeconds();
		if(state.timer !== ''){
			time = state.timer;
		}
		if (prop.data.length < 1) {
			console.log('你没有选中账单类型')
		} else {
			if (prop.changeType == '修改') {
				uni.request({
					url: 'http://124.221.162.230:8888/bill/updateBill',
					method: 'POST',
					header: {
						Authorization: state.token
					},
					data: {
						billId: prop.info.billId,
						billName: prop.info.billName,
						type: prop.data[0],
						money: state.momey,
						billType: prop.data[1],
						time: time,
						remark: state.remark
					},
					success: (res) => {
						if (res.data.code == 200) {
							console.log('修改成功')
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}
				})
			} else if (prop.changeType == '增加' || prop.changeType == '扫描') {
				// console.log('增加')
				uni.request({
					url: 'http://124.221.162.230:8888/bill/insertBill',
					method: 'POST',
					header: {
						Authorization: state.token
					},
					data: {
						billName: "bill1",
						type: prop.data[0],
						money: state.momey,
						billType: prop.data[1],
						time: time,
						remark: state.remark
					},
					success: (res) => {
						// console.log(res)
						if (res.data.code == 200) {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		width: 100%;
		height: 100%;

		.remark {
			width: 100%;
			height: 100rpx;
			background-color: #f8f8f8;
			border-radius: 20rpx;
			display: flex;
			align-items: center;

			.input {
				width: 75%;
				height: 100%;
				// background-color: aqua;
				border-top-left-radius: 20rpx;
				border-bottom-left-radius: 20rpx;
				overflow: hidden;
				padding-left: 20rpx;
				display: flex;
				align-items: center;

				input {
					width: 100%;
				}
			}

			.momey {
				font-size: 36rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.keyboard {
			margin-top: 30rpx;
			height: calc(100% - 130rpx);
			width: 100%;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;

			.keyItem {
				transition: all 0.2s;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1rpx solid #f8f8f8;
			}

			.keyItem:last-child {
				background-color: aqua;
			}

			.btnBG {
				transition: all 0.2s;
				background-color: #f1f1f1;
			}
		}
	}
</style>